<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>引出生命周期</title>
    <style>
      h2 {
      color: rgb(red, green, blue);
      }
    </style>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- <h2 :style="{'opacity': opacity}">欢迎学习 Vue</h2> -->
      <!-- :style="xx" xx:为js表达式 -->
      <h2 :style="{opacity}">欢迎学习 Vue</h2>
      <h2 v-if="a">你好啊</h2> 
      <!-- 使用 v-if 指令让节点显时不会触发 mounted() -->
    </div>
  </body>
  <script>
    new Vue({
      el: "#root",
      data() {
        return {
          opacity: 1,
          a:false,
        };
      },
      methods: {
        // methods 中的方法使用：①作为事件回调 ②在插值语法中调用
      },

      // Vue完成模板的解析并把初始的真实的DOM元素放入页面后(挂载完毕)调用mounted()函数
      // mounted()只会在初始时调用一次  mounted()为生命周期函数中的一个
      mounted() {
        console.log("挂载完毕",this);
        // 在页面中的所有元素挂载完毕后,开启定时器让文字透明度进行变化
        setInterval(() => {
          this.opacity <= 0 ? (this.opacity = 1) : (this.opacity -= 0.01);
        }, 26);
        // 全局中只会存在一个定时器,若使用methods则每次解析模板就会生成一个计时器
      },
    });

    // 通过外部的定时器实现(不推荐)
    /* setInterval(() => {
      vm.opacity <= 0 ? (vm.opacity = 1) : (vm.opacity -= 0.01);
    }, 26); */
  </script>
</html>
